<template>
  <div class="recommend-main">
    <div class="iconfont recommend-title">
      <span class="icon-hot">&#xe645;</span>
      <span>本周热门榜单</span>
      <span class="all-list">
        <label for="all">全部榜单</label>
        <span class="iconfont icon-index" id="all">&#xe6ab;</span>
      </span>
    </div>
    <div class="swiper-border">
      <ul class="swiper-home">
        <li class="swiper-item" v-for="(item,index) in hotImages" :key="index">
          <div class="swiper-item-main">
            <div class="hot-swiper-top">
              <img :src="hotImagesTop[index]" class="hot-top" v-if="index < 3" />
            </div>
            <img :src="item.imgUrl" class="swiper-img" />
          </div>
          <span class="img-desc">{{item.desc}}</span>
          <div style="display: flex">
            <span style="color: #FF7F50">{{item.money}}</span>
            <span style="color: #616161">起</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    hotImages: Array,
    hotImagesTop: Array
  },
  data() {
    return {
      swiperOption: {
        scrollbar: '.swiper-scrollbar',
        freeMode: true,
        freeModeMomentumRatio: 1,
        slidesOffsetBefore: 10,
        slidesOffsetAfter: 10
      }
    }
  },
  computed: {}
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl';

.recommend-main {
  .recommend-title {
    line-height: 0.8rem;
    text-indent: 0.2rem;
    border-top: 0.18rem solid #F5F5F5;

    .icon-hot {
      color: #FF4500;
    }

    .all-list {
      float: right;
      font-size: 0.24rem;
      color: #616161;

      .icon-index {
        padding-right: 0.26rem;
      }
    }
  }

  .swiper-border {
    border-bottom: 0.18rem solid #F5F5F5;

    .swiper-home {
      width: 100%;
      display: flex;
      overflow: scroll;
      white-space: nowrap;

      // overflow-y: hidden;
      .swiper-item {
        width: 2rem;
        height: 3.22rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 0.12rem;

        .swiper-item-main {
          .hot-swiper-top {
            width: 0.84rem;
            height: 0.4rem;
            position: relative;
            margin-bottom: -0.32rem;

            .hot-top {
              width: 0.84rem;
              height: 0.4rem;
            }
          }
        }

        // .hot-num {
        // position: absolute;
        // top: 0;
        // left: 0;
        // z-index: 1;
        // overflow: hidden;
        // width: 0.84rem;
        // height: 0.4rem;
        // }
        .swiper-img {
          // padding-inline-end: 0.12rem;
          width: 2rem;
          height: 2rem;
        }

        .img-desc {
          display: inline-block;
          text-align: center;
          margin: 0.16rem 0 0.12rem 0;
          width: 2rem;
          ellipsis();
        }
      }
    }
  }
}
</style>
